<template>
  <div class="container">
    <!-- 头部保存 收费模块 -->
    <Savepay />
    <!-- 输入框模块 -->
    <Search />
    <el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple">
    <!-- 药品信息 -->
    <Message :arr="arr" @resetparentFun="getData" @openBox="parentBox"/>
    <Footer />
    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
        <!-- 本周排行 -->
    <Ranking :newA="newA" @shuaxinparentFun="getRanke" @addDrug="parentFun"/>
    </div></el-col>
</el-row>
    

    <!-- 弹框组件 -->
    <Popout v-if="isShow"/>
    <!-- 排行药品添加 -->
    <Addrank v-if="isDrug"/>
    <!-- 底部抄底 -->
    
  </div>
</template>

<script>
import Savepay from "./components/Savepay.vue";
import Search from "./components/Search.vue";
import Message from "./components/Message.vue";
import Ranking from "./components/Ranking.vue";
import Popout from './components/Popout.vue'
import Footer from "./components/Footer.vue";
import Addrank from "./components/Addrank.vue"
import {getDrug,creasePhang} from '../../api/drug'
export default {
  components: { 
    Savepay,
    Search,
    Message,
    Ranking,
    Popout,
    Footer,
    Addrank
   },
   data(){
return {
  arr:[],
  newA:[],
  isShow:false,
  isDrug:false
}
   },
   mounted() {
     this.getData()//首屏函数
     this.getRanke()

   },
   methods: {
     parentBox(){
      this.isShow=true
     },
     parentFun(){
     this.isDrug=true
     },
     getData(){
       getDrug().then(res=>{
        //  console.log(res);
         if(res.code==200){
           this.arr=res.data

         }
       })
     },
     getRanke(){
       creasePhang().then(res=>{
         if(res.code==200){
           this.newA=res.data
         }
       })
     }
   },
};
</script>
<style scoped>
.container{
  width: 100%;
 min-height: 100%;
  border-radius: 20px;
  box-shadow: 0 0 5px #333;
  background: #fff;
}
</style>
